<template>
<div class="demo-collapse">
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item name="1">
      <template #title>
        <img src="@/assets/collection/shop.png"width="24px" style="padding: 0 10px"/>
        <el-text>宝藏好店</el-text>
      </template>
      <Shop/>
    </el-collapse-item>
    <el-collapse-item name="2">
      <template #title>
        <img src="@/assets/collection/goods.png"width="24px" style="padding: 0 10px"/>
        <el-text>宝藏好物</el-text>
      </template>
      <Goods/>
    </el-collapse-item>
  </el-collapse>
</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Shop from "@/components/collection/Shop.vue";
import Goods from "@/components/collection/Goods.vue";
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  console.log(val)
}
</script>
<style scoped lang="scss">
.demo-collapse{
  width: 1200px;
  height: 85vh;
  margin: 50px auto;
}
</style>
